<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.min.js"></script>
</head>

<body>
    <!-- 添加新图书panel -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">
            <div class="input-group">
                <span class="input-group-addon">书名</span>
                <input type="text" class="form-control" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <span class="input-group-addon">作者</span>
                <input type="text" class="form-control" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <span class="input-group-addon">出版社</span>
                <input type="text" class="form-control" placeholder="请输入出版社">
            </div>
            <button class="btn btn-primary">添加</button>
        </div>
    </div>
    <!-- 图书表格 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>

        </thead>
        <tbody id="tb">

        </tbody>
    </table>
    <script>
        //入口函数
        $(function () {
            function addlist() {
                $.get('http://www.liulongbin.top:3006/api/getbooks',
                 function (res) {
                   if(res.status !=200) return alert('获取数据失败')
                   var rom = []
                   $.each(res.data,function(i,item) {
                       rom.push('<tr> <td>'+ item.id+' </td><td>'+item.bookname+' </td><td>'+item.author+' </td><td>'+item.publishe+' </td><td><a href:"javascript:;">操作</a> </td></tr>')
                   })
                   $('#tb').empty().append(rom.join(''))

                   
                })
            }
            addlist()
        })
    </script>
</body>

</html>
